<script setup>
import {Avatar, House, Message, Notebook, Setting, UserFilled} from "@element-plus/icons-vue";

import {useRoute} from "vue-router";

const route = useRoute()
/*获取头像*/
const tx = ref('/src/assets/logo.jpg')

</script>

<template>
  <div class="menu-container">
    <el-card class="menu" shadow="always">
      <!--头像-->
      <div style="text-align: center;">
        <el-avatar :icon="UserFilled" :size="100" :src=tx size='large'/>
      </div>
      <!--    菜单篮子  -->
      <div class="cdlz">

        <el-menu :default-active="route.path" background-color="rgba(238, 238, 245, 0)"
                 class="el-menu" router text-color="rgba(88, 88, 96, 0.70)">
          <!--         首页 -->
          <el-menu-item index="/admin">
            <el-icon>
              <House/>
            </el-icon>
            <template #title>首页</template>
          </el-menu-item>
          <!--         文章 -->
          <el-menu-item index="/admin/article">
            <template #title>
              <el-icon>
                <Message/>
              </el-icon>
              <span>文章</span>
            </template>
          </el-menu-item>


          <!--         分类 -->
          <el-menu-item index="/admin/sort">
            <el-icon>
              <Notebook/>
            </el-icon>
            <template #title>分类</template>
          </el-menu-item>
          <!--         用户 -->
          <el-menu-item index="/admin/user">
            <el-icon>
              <Avatar/>
            </el-icon>
            <template #title>用户</template>
          </el-menu-item>
          <!--         设置 -->
          <el-menu-item index="/admin/set">
            <el-icon>
              <Setting/>
            </el-icon>
            <template #title>设置</template>
          </el-menu-item>

        </el-menu>

      </div>


    </el-card>
  </div>
</template>

<style scoped>
.cdlz {
  border-right: solid 1px var(--el-menu-border-color); /*线条颜色*/
  height: 700px; /*边框高度*/
  transform: translateY(30px); /* 下移30个像素 */
}


.el-menu-item {
  border-radius: 5px; /*角度圆弧形*/
  font-size: 17px;


}


.el-menu-item:hover {
  background-color: rgba(206, 206, 215, 0.5); /*鼠标停留背景色*/

}


.el-menu {
  /*  border-right: solid 1px var(--el-menu-border-color); !*线条*!
    height: 850px; !*高度*!*/

  border-right: none; /*边条颜色替换为空*/

}


.menu {
  border-radius: 5px; /*角度圆弧形*/
  height: 890px;
  width: 250px;
  margin-top: 15px;
  transform: translateX(23px);
  /*  background-color: rgba(238, 238, 245, 0.5);*/

}

.menu-container {
  background-color: rgba(238, 238, 245, 0.5);

  height: 100%;
  overflow-x: hidden; /* 防止水平滚动 */
  overflow-y: hidden; /* 防止垂直滚动 */
}
</style>